<template>
  <div class="members">
    <div class="wrapper">
      <div class="line">
        我的家人列表
        <!--最多添加5人<span v-if="members.length >= 5">,已达人数上限</span>-->
      </div>
      <ul class="members-container">
        <li class="members-item" v-for="item in members" @click="toDetail(item.id,item.name)">
          <div class="left">
            <p><span class="name first">{{item.name}}&nbsp;<span style="color: #ed9b3d">{{item.default === 1 ? '(默认)': ''}}</span></span><span>{{item.sex === 1 ? '男': '女'}}</span></p>
            <p><span class="first">{{item.cardNum}}</span><span>0张就诊卡</span></p>
          </div>
          <div class="right">
            <img src="../../../../static/img/right_gray_arrow.png"/>
          </div>
        </li>
      </ul>
    </div>
    <transition name="memberDetail">
      <member-detail v-if="detailShow" :familys="members"></member-detail>
    </transition>
    <transition name="addMembers">
      <add-member v-if="addshow"></add-member>
    </transition>
  </div>
</template>

<script>
    import MemberDetail from "./memberDetail";
    import {mapMutations, mapGetters} from 'vuex'
    import AddMember from "./addMember";
    import {getFamily} from "../../../api/personal";
    import {ERR_OK} from "../../../api/config";

    export default {
      components: {
        AddMember,
        MemberDetail},
      name: "family-members",
      data () {
        return {
          detailShow: false,
          addShow: false,
          members: []
        }
      },
      mounted () {
        this.setTitle('我的家人')
        this.setAddNewMember(true)
        this._getFamily()
      },
      methods: {
        toDetail (id,name) {
          this.detailShow = true
          this.$router.push({
            path: '/personal/familyMembers/'+ id
          })
          this.setTitle(name)
        },
        _getFamily () {
          getFamily().then((res) => {
            let response = res.data
            if (response.code === ERR_OK) {
              this.members = response.result
            }
          }).catch((err) => {
            console.log('获取家庭成员失败')
          })
        },
        ...mapMutations({
          setTitle: 'SET_TITLE',
          setAddNewMember: 'SET_ADD_NEW_MEMBER',
          setaddshow: 'SET_ADD_SHOW'
        }),
        aa () {
          let id = this.$route.params.id
          if (id) {
            this.detailShow = true
          } else{
            this.detailShow = false
            this.setTitle('我的家人')
            this.setaddshow(false)
            this.setAddNewMember(true)
          }
        }
      },
      computed: {
        ...mapGetters([
          'addshow'
        ])
      },
      watch: {
        '$route'(to, from) {
          this.aa()
          this._getFamily()
        }
      }
    }
</script>

<style scoped lang="scss">
  @import "../../../common/sass/mixin";

  .members{
    position: absolute;
    top: 90px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: $bc;
    .wrapper{
      .line{
        line-height: 45px;
        @include font-dpr(24px);
        color: $fgc;
        text-align: left;
        padding: 0 30px;
      }
      .members-container{
        background-color: #ffffff;
        padding-left: 28px;
        .members-item{
          @include font-dpr(24px);
          color: $fgc;
          border-bottom: 1px solid $borderCor;
          display: flex;
          align-items: center;
          padding: 20px 0;
          .left{
            flex: 1;
            p{
              display: flex;
              /*margin-top: 10px;*/
              .name{
                color: #333333;
              }
              .first{
                flex: 1;
                text-align: left;
              }
              span{

              }
            }
          }
          .right{
            margin:0 20px 0 10px;
            img{
              width: 24px;
              height: 24px;
            }
          }
          &:last-child{
            border: none;
          }
        }
      }
    }
  }
  .memberDetail-enter-active, .memberDetail-leave-active{
    transition: all 0.3s ease;
  }
  .memberDetail-enter, .memberDetail-leave-to{
    transform: translate3d(100%, 0, 0);
  }
  .memberDetail-leave, .memberDetail-enter-to{
    transform: translate3d(0, 0, 0);
  }
  .addMembers-enter-active, .addMembers-leave-active{
    transition: all 0.3s ease;
  }
  .addMembers-enter, .addMembers-leave-to{
    transform: translate3d(100%, 0, 0);
  }
  .addMembers-leave, .addMembers-enter-to{
    transform: translate3d(0, 0, 0);
  }
</style>
